<template>
  <div class="app-container">
    <div class="container">
      <el-row :gutter="20" class="filter-container">
        <el-col :span="13">
          <el-breadcrumb separator="">
            <el-breadcrumb-item to="/softManage/softManage"><i
              class="el-icon-arrow-left"
              style="cursor: pointer;"
            >返回</i></el-breadcrumb-item>
          </el-breadcrumb>
        </el-col>
      </el-row>
      <el-row class="margin-top20">
        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm" size="mini">
          <el-col :span="7" :offset="1">
            <el-form-item label="软件Logo:" prop="logo">
              <el-upload
                class="avatar-uploader"
                action="http://10.10.10.11:9006/file/upload"
                :show-file-list="false"
                :on-change="logoChange"
                :headers="upHeaders"
                accept=".jpg,.jpeg,.png,.JPG,.JPEG,.PBG"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="logoUrl" :src="logoUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon" />
              </el-upload>
            </el-form-item>
            <el-form-item label="软件名称:" prop="nameId">
              <div class="block">
                <el-cascader
                  v-model="ruleForm.nameId"
                  placeholder="请选择"
                  :options="optionsP"
                  filterable
                  clearable
                  :show-all-levels="false"
                  style="width:200px;float: left"
                />
              </div>
              <!-- <el-select v-model="ruleForm.nameId" placeholder="请选择软件名称">
                <el-option v-for="item in options9" :key="item.id" :label="item.name" :value="item.id" />
              </el-select> -->
            </el-form-item>
            <!-- <el-form-item label="软件编号:" >
              <el-input v-model="ruleForm.versionNum" maxlength="20" placeholder="请输入软件编号" />
            </el-form-item> -->
            <el-form-item label="软件版本:" prop="softVersion">
              <el-input v-model="ruleForm.softVersion" maxlength="40" placeholder="请输入软件版本" />
            </el-form-item>
            <el-form-item label="软件类型:" prop="typeId">
              <el-select
                v-model="ruleForm.typeId"
                placeholder="请选择软件类型"
                @change="PurchAmountC"
              >
                <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
            <el-form-item label="采购部门:" prop="departId">
              <el-select
                v-model="ruleForm.departId"
                placeholder="请选择采购部门"
                :disabled="options1.length > 2 ? false : true"
              >
                <el-option v-for="item in options10" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="所在网络:">
              <el-select v-model="ruleForm.networkType" placeholder="请选择所在网络">
                <el-option v-for="item in options3" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
            <el-form-item label="是否国内:">
              <el-select v-model="ruleForm.softFrom" placeholder="请选择是否国内">
                <el-option v-for="item in options4" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item> -->
            <!-- <el-form-item label="采购时间:">
              <div>
                <el-date-picker
                  v-model="ruleForm.purchaseDate"
                  :disabled="ruleForm.typeId == '60660672704221184'? true : false"
                  style="width:67%"
                  value-format="yyyy-MM-dd"
                  type="date"
                  placeholder="选择日期"
                />
              </div>
            </el-form-item> -->
            <el-form-item label="许可类型:">
              <el-select
                v-model="ruleForm.permitType"
                placeholder="请选择许可类型"
                :disabled="ruleForm.typeId == '60660672704221184'? true : false"
              >
                <el-option v-for="item in options5" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <!-- <el-form-item label="采购金额:">
              <el-input
                v-model="ruleForm.purchaseAmount"
                onkeyup="value=value.replace('-','')"
                type="number"
                min="0"
                maxlength="20"
                placeholder="请输入采购金额（单位: 元）"
                :disabled="ruleForm.typeId == '60660672704221184'? true : false"
              />
            </el-form-item> -->
            <!-- <el-form-item label="许可数量:">
              <el-input v-model="ruleForm.permitCount" maxlength="20" placeholder="请输入许可数量" />
            </el-form-item> -->
            <el-form-item label="授权方式:" prop="permitMode">
              <el-select
                v-model="ruleForm.permitMode"
                placeholder="请选择授权方式"
                @change="permitModeC"
              >
                <el-option v-for="item in options6" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="序列号:" prop="name">
              <el-input v-model="ruleForm.version" maxlength="20" placeholder="请输入序列号" />
            </el-form-item> -->
            <el-form-item label="使用范围:" prop="useRange">
              <el-select
                v-model="ruleForm.useRange"
                :disabled="options10.length > 2 ? false : true"
                placeholder="请选择使用范围"
              >
                <el-option v-for="item in options10" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
            <el-form-item label="使用状态:" prop="useState">
              <el-select v-model="ruleForm.useState" placeholder="请选择使用状态">
                <el-option v-for="item in options8" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
            <el-form-item v-if="ruleForm.permitMode == '1' || ruleForm.permitMode == '3'" label="许可期限:">
              <el-input
                v-model="ruleForm.permitEndDate"
                maxlength="10"
                placeholder="请输入期限:2020-01-01"
                :disabled="(ruleForm.typeId == '60660672704221184' || ruleForm.permitMode == '1'
                  || ruleForm.permitMode == '3')? true : false"
              />
            </el-form-item>
            <el-form-item v-if="ruleForm.permitMode !== '1' && ruleForm.permitMode !== '3'" label="许可期限:">
              <div>
                <el-date-picker
                  v-model="ruleForm.permitEndDate"
                  :disabled="(ruleForm.typeId == '60660672704221184' || ruleForm.permitMode == '1')? true : false"
                  title="请选择许可截止期限"
                  value-format="yyyy-MM-dd"
                  type="date"
                  placeholder="选择日期"
                />
              </div>
            </el-form-item>
            <!-- <el-form-item label="技术员:">
              <el-input v-model="ruleForm.technologyName" maxlength="20" placeholder="请输入技术员" />
            </el-form-item>
            <el-form-item label="技术员电话:" prop="phone">
              <el-input v-model="ruleForm.technologyPhone" maxlength="11" placeholder="请输入技术员电话" />
            </el-form-item>
            <el-form-item label="管理员:">
              <el-input v-model="ruleForm.manageName" maxlength="20" placeholder="请输入管理员" />
            </el-form-item> -->
<!--            v-if="!isEdit"-->
            <el-form-item prop="secretKeyType" label="来源:">
              <el-radio-group v-model="ruleForm.type">
                <el-radio v-model="ruleForm.type" label="0">库内</el-radio>
                <el-radio v-model="ruleForm.type" label="1">库外</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="跳转链接:">
              <el-input v-model="ruleForm.webUrl" placeholder="请输入跳转链接" />
            </el-form-item>
            <el-form-item label="软件介绍" prop="descr">
              <el-input
                v-model="ruleForm.descr"
                type="textarea"
                rows="5"
                maxlength="500"
                show-word-limit
                placeholder="请输入软件介绍"
              />
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <!-- <el-form-item label="软件编号:" >
              <el-input v-model="ruleForm.versionNum" maxlength="20" placeholder="请输入软件编号" />
            </el-form-item> -->
            <!-- <el-form-item label="软件介绍" prop="descr">
              <el-input
                v-model="ruleForm.descr"
                type="textarea"
                rows="5"
                maxlength="500"
                show-word-limit
                placeholder="请输入软件介绍"
              />
            </el-form-item> -->
            <el-form-item label="检索名称:" prop="sysDisplayName">
              <el-input v-model="ruleForm.sysDisplayName" placeholder="请输入检索名称" />
            </el-form-item>
            <el-form-item label="检索版本:">
              <el-input v-model="ruleForm.sysDisplayVersion" placeholder="请输入系统版本号" />
            </el-form-item>
<!--            <el-form-item v-if="!isEdit" prop="secretKeyType">-->
              <el-form-item  prop="secretKeyType">
              <el-radio-group v-model="ruleForm.secretKeyType" :disabled="ruleForm.typeId == '60660672704221184'? true : false">
                <el-radio v-model="ruleForm.secretKeyType" label="1">有秘钥</el-radio>
                <el-radio v-model="ruleForm.secretKeyType" label="0">无秘钥</el-radio>
              </el-radio-group>
            </el-form-item>
            <div v-if="ruleForm.secretKeyType == 1 && !isEdit">
              <el-form-item
                v-for="(item, index) in secretKeyList"
                :key="item.key"
                :label="'秘钥' + (index+1)+':'"
                :rules="{
                  required: true, message: '请输入秘钥', trigger: 'blur'
                }"
              >
                <el-input v-model="item.value" style="width:120px" />
                <el-input
                  v-model="item.secretKeyNum"
                  title="请输入秘钥数量，默认为1"
                  onkeyup="value=value.replace('-','')"
                  min="0"
                  type="number"
                  placeholder="秘钥数量"
                  style="width:100px; margin-left:8px"
                />
                <el-button type="danger" class="margin-left10" @click.prevent="removeDomain(item)">
                  <i class="el-icon-remove-outline" />
                </el-button>
              </el-form-item>
              <el-form-item v-if="!isEdit">
                <el-button
                  type="text"
                  size="medium"
                  :disabled="ruleForm.typeId == '60660672704221184'? true : false"
                  @click="addDomain"
                >添加秘钥<i
                  class="el-icon-circle-plus"
                />
                </el-button>
              </el-form-item>
            </div>
            <el-form-item prop="fileMd5">
              <webuploader2 v-if="isShowUploadBtn" @setFileUrl="setFileUrl" />
              <div v-if="!isShowUploadBtn" >
                {{ruleForm.originalFileName}}
                <span class="itemDone">上传完成</span><span  @click="handleClose(1)" class="itemDel">删除</span>
                <br>
                <p class="itemDone" style="color: red">如需更换请先删除已上传文件</p>
              </div>
            </el-form-item>
          </el-col>

          <el-col :span="23" :offset="1" style="text-algin:left">
            <el-form-item label="轮播图片:">
              <el-upload
                multiple
                action="http://10.10.10.11:9006/file/upload"
                list-type="picture-card"
                :headers="upHeaders"
                :on-change="bannerChange"
                :auto-upload="true"
                accept=".jpg,.jpeg,.png,.JPG,.JPEG,.PNG"
                :file-list="fileBannerList"
                :on-success="handleAvatarSuccessBanner"
                :before-upload="beforeAvatarUpload"
              >
                <i slot="default" class="el-icon-plus" />
                <div slot="file" slot-scope="{file}">
                  <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                  <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                      <i class="el-icon-zoom-in" />
                    </span>
                    <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                      <i class="el-icon-delete" />
                    </span>
                  </span>
                </div>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="13" :offset="8">
            <el-form-item>
              <el-button type="primary" style="width:100px;" @click="submitForm('ruleForm')">提交</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
    </div>

  </div>
</template>

<script>
import axios from 'axios'
import { mapGetters } from 'vuex'
import {
  getToken
} from '@/utils/auth'
import {
  softList,
  softAdd,
  softDel,
  softPut,
  softTypeList,
  softNamePage
} from '@/api/softManage'
import {
  departmentList
} from '@/api/department'
import webuploader2 from '@/components/webuploader2/webuploader2'
export default {
  components: {
    webuploader2
  },
  computed: {
    ...mapGetters([
      'name',
      'sidebar',
      'avatar',
      'userInfo'
    ]),
    isManage() {
      // console.log(getCookie('userInfo').realName)
      if (getCookie('userInfo')) {
        return JSON.parse(getCookie('userInfo')).roleType === 1024 ||
        JSON.parse(getCookie('userInfo')).roleType === 1025
      } else {
        return this.userInfo.roleType === 1024
      }
    }
  },
  data() {
    return {
      isShowUploadBtn: false,
      optionsP: [],
      value1: '',
      fileBannerList: [],
      filList: {},
      upHeaders: {
        ACCESS_TOKEN: getToken()
      },
      maxSize: 5 * 1024 * 1024 * 1024, // 上传最大文件限制
      multiUploadSize: 500 * 1024 * 1024, // 大于这个大小的文件使用分块上传(后端可以支持断点续传)
      eachSize: 500 * 1024 * 1024, // 每块文件大小
      requestCancelQueue: [], // 请求方法队列（调用取消上传
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      imageUrl: '',
      datevalue1: '',
      options: [],
      options1: [{
        id: '1',
        name: '技术部'
      }, {
        id: '2',
        name: '合同部'
      }],
      options2: [{
        id: '1',
        name: '账号密码'
      }, {
        id: '2',
        name: '关联登录'
      }],
      options3: [{
        id: '1',
        name: '内网'
      }, {
        id: '2',
        name: '外网'
      }],
      options4: [{
        id: '1',
        name: '国内'
      }, {
        id: '2',
        name: '国外'
      }],
      options5: [{
        id: '1',
        name: '数量授权'
      }, {
        id: '2',
        name: '场地授权'
      }],
      options6: [{
        id: '1',
        name: '永久授权'
      }, {
        id: '2',
        name: '年度授权'
      }, {
        id: '3',
        name: '无授权'
      }
      ],
      options7: [{
        id: '1',
        name: '公司全体'
      }, {
        id: '2',
        name: '计划合同部'
      }, {
        id: '3',
        name: '正版软件服务器'
      }],
      options10: [{
        id: '0',
        name: '公司全体'
      }],
      options8: [{
        id: '1',
        name: '正在使用'
      }, {
        id: '2',
        name: '停止使用'
      }],
      options9: [{
        id: '1',
        name: '中间间软件'
      }, {
        id: '2',
        name: '通信软件'
      }],
      fileUrl: '',
      logoUrl: '',
      bannerUrl: '',
      secretKeyList: [{
        value: '',
        key: '1',
        secretKeyNum: 1
      }],
      ruleForm: {
        originalFileName: '',
        webUrl: '',
        fileMd5: '',
        secretKeyNum: 1,
        'departId': '',
        'descr': '',
        'id': '',
        'imgs': '',
        'logo': '',
        'name': '',
        manageName: '',
        'nameId': '',
        'networkType': '1',
        'permitCount': '',
        'permitEndDate': '永久',
        'permitMode': '1',
        'permitType': '1',
        'purchaseAmount': '',
        'purchaseDate': '',
        'remark': '',
        'secretKey': '',
        'secretKeyType': '1',
        'secretKeyType1': '1',
        'serialNumber': '',
        'softFrom': '1',
        'softIndex': '',
        'softNumber': '',
        'softVersion': '',
        'sysDisplayName': '',
        'sysDisplayVersion': '',
        'technologyName': '',
        'technologyPhone': '',
        'typeId': '58590645649817600',
        'useRange': '',
        visibleRange: '0',
        'useState': '1',
        'year': '',
        type: '0'
      },
      rules: {
        fileMd5: [
          { required: true, message: '请上传文件', trigger: 'change' }
        ],
        nameId: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        realName: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        typeId: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        departId: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        permitMode: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        useRange: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        useState: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        phone: [
          { message: '请输入手机号', trigger: 'change' },
          { min: 11, max: 11, message: '手机号长度不对', trigger: 'change' }
        ],
        logo: [{
          message: '请上传软件Logo',
          trigger: 'blur'
        }],
        name: [{
          required: true,
          message: '请输入',
          trigger: 'blur'
        },
        {
          min: 2,
          max: 15,
          message: '长度在 2 到 15 个字符之间',
          trigger: 'blur'
        }
        ],
        versionNum: [{
          message: '请输入',
          trigger: 'blur'
        },
        {
          min: 15,
          max: 30,
          message: '长度在 15 到 30 个字符之间',
          trigger: 'blur'
        }
        ],
        softVersion: [{
          required: true,
          message: '请输入版本',
          trigger: 'blur'
        },
        {
          min: 2,
          max: 40,
          message: '长度在 2 到 40 个字符之间',
          trigger: 'blur'
        }
        ],
        date1: [{
          type: 'date',
          required: true,
          message: '请选择日期',
          trigger: 'change'
        }],
        date2: [{
          type: 'date',
          required: true,
          message: '请选择时间',
          trigger: 'change'
        }],
        type: [{
          type: 'array',
          required: true,
          message: '请至少选择一个活动性质',
          trigger: 'change'
        }],
        secretKeyType: [{
          required: true,
          message: '请选择活动资源',
          trigger: 'change'
        }],
        descr: [{
          required: true,
          message: '请填写软件介绍',
          trigger: 'blur'
        }]
      },
      isEdit: false
    }
  },
  created() {
    this.getDepartmentList()
    this.softNamePage()
    this.getTypeList()
    if (this.$route.query.typeId) {
      this.ruleForm.typeId = this.$route.query.typeId
    }
    if (this.$route.query.software && this.$route.query.software !== 'up') {
      this.isEdit = true
      if (this.$route.query.software.secretKeyList === 1) {
        var listAry = []
        listAry = this.$route.query.software.secretKey.split('/')
        listAry.map(item => {
          this.secretKeyList.push({
            value: item,
            key: item,
            secretKeyNum: 1
          })
        })
      }
      if (this.$route.query.software.imgsArr && this.$route.query.software.imgsArr.length > 0) {
        this.$route.query.software.imgsArr.map(item => {
          this.fileBannerList.push({
            url: item
          })
          this.ruleForm.imgs += ',' + item
        })
        this.ruleForm.imgs = this.ruleForm.imgs.slice(1)
      }
      this.logoUrl = this.$route.query.software.logo
      for (const key in this.ruleForm) {
        this.ruleForm[key] = this.$route.query.software[key] + ''
      }
      this.ruleForm.nameId = this.$route.query.software.nameId
      // console.log('this.$route.query.software:', this.$route.query.software)
      // console.log('this.$route.query.software.originalFileName:', this.$route.query.software.originalFileName)
      this.ruleForm.originalFileName = this.$route.query.software.originalFileName
    }
  },
  mounted() {
    // this.getTypeList()
    console.log('走路：',)
    if(this.$route.query.software=='up'){
      this.isShowUploadBtn = true
    }else{
      this.isShowUploadBtn = false
    }
  },
  methods: {
    handleClose(tag) {
      console.log("显示上传按钮1:",this.isShowUploadBtn)
      this.isShowUploadBtn = true
      console.log("显示上传按钮2:",this.isShowUploadBtn)
    },
    permitModeC(val) {
      if (val == 1) {
        this.ruleForm.permitEndDate = '永久'
      } else if (val == 2) {
        this.ruleForm.permitEndDate = ''
      } else {
        this.ruleForm.permitEndDate = '无'
      }
    },
    PurchAmountC(val) {
      if (val == '60660672704221184') {
        this.ruleForm.useRange = '0'
        this.ruleForm.permitEndDate = '永久'
        this.ruleForm.permitType = ''
        this.ruleForm.purchaseAmount = ''
        this.ruleForm.purchaseDate = ''
        this.ruleForm.permitCount = ''
        this.ruleForm.secretKeyType = '0'
        this.ruleForm.secretKey = ''
      }
    },
    getDepartmentList() {
      departmentList({
        limit: 50,
        page: 1
      }).then(res => {
        if (res.code === 200) {
          this.options1 = []
          this.options10 = [{
            id: '0',
            name: '公司全体'
          }]
          res.data.data.map(item => {
            if (item.id !== '1025' && item.id !== '55904214559285248') {
              this.options1.push(item)
              this.options10.push(item)
            }
          })
        }
        if (!this.isEdit && this.userInfo.roleType != '1024' && this.options10.length > 1) {
          this.ruleForm.useRange = this.options10[1].id
          this.ruleForm.departId = this.options10[1].id
        }
      })
    },
    softNamePage() {
      softNamePage({
        limit: 200,
        page: 1
      }).then(res => {
        if (res.code === 200) {
          this.optionsP = res.data.data
        }
      })
    },
    setFileUrl(params) {
      this.ruleForm.fileMd5 = params
      console.log("显示上传按钮3:",this.ruleForm.fileMd5)
      if(this.ruleForm.fileMd5){
        this.isShowUploadBtn = false
      }else{
        this.isShowUploadBtn = true
      }
    },
    logoChange(file, fileList) {},
    bannerChange(file, fileList) {},
    fileChange(file, fileList) {},
    getTypeList() {
      softTypeList({
        limit: 20,
        page: 1
      }).then(res => {
        if (res.code === 200) {
          res.data.data.map(item => {
            if (item.id !== '1025' && item.id !== '55904214559285248') {
              this.options.push(item)
            }
          })
        }
      })
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleRemove(file) {
      this.fileBannerList = this.fileBannerList.filter(item => item.uid !== file.uid)
      this.ruleForm.imgs = ''
      this.fileBannerList.map(item => {
        if (item.response && item.response.data) {
          this.ruleForm.imgs += ',' + item.response.data
        } else {
          this.ruleForm.imgs += ',' + item.url
        }
      })
      this.ruleForm.imgs = this.ruleForm.imgs.slice(1)
    },
    handleAvatarSuccess(response, file, fileList) {
      if (response && response.code === 200) {
        this.ruleForm.logo = response.data
        this.logoUrl = URL.createObjectURL(file.raw)
      } else {
        this.$message.warning('请求异常')
      }
    },
    handleAvatarSuccessFile(response, file, fileList) {
      if (response && response.code === 200) {
        this.ruleForm.fileMd5 = response.data + ''
      } else {
        this.$message.warning('请求异常')
      }
      // console.log(this.fileList)
      // this.ruleForm.fileMd5 = URL.createObjectURL(file.raw)
    },
    handleAvatarSuccessBanner(response, file, fileList) {
      if (fileList) {
        this.fileBannerList = fileList
        this.ruleForm.imgs = ''
        fileList.map(item => {
          if (item.response) {
            this.ruleForm.imgs += ',' + item.response.data
          } else {
            this.ruleForm.imgs += ',' + item.url
          }
        })
        this.ruleForm.imgs = this.ruleForm.imgs.slice(1)
      }
      // console.log(response, file, fileList)
      // console.log(this.fileList)
      // this.ruleForm.fileMd5 = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG|png格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    removeDomain(item) {
      var index = this.secretKeyList.indexOf(item)
      if (index !== -1) {
        this.secretKeyList.splice(index, 1)
      }
    },
    addDomain() {
      // console.log(this.ruleForm)
      this.secretKeyList.push({
        value: '',
        key: Date.now()
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.ruleForm.typeId + '' === '60660672704221184') {
            this.ruleForm.useRange = '0'
            this.ruleForm.permitEndDate = '永久'
            this.ruleForm.permitType = ''
            this.ruleForm.purchaseAmount = ''
            this.ruleForm.purchaseDate = ''
            this.ruleForm.permitCount = ''
            this.ruleForm.secretKeyType = 0
            this.ruleForm.secretKey = ''
          }
          if (this.ruleForm.secretKeyType == 1) {
            var listAry = []
            this.secretKeyList.map(item => {
              if (item.value) {
                listAry.push(item.value + ',' + item.secretKeyNum)
              }
            })
            // console.log(listAry.join('|'))
            this.ruleForm.secretKey = listAry.join('|')
            // if (this.ruleForm.nameId.length > 0) {
            //   this.ruleForm.nameId = this.ruleForm.nameId[this.ruleForm.nameId.length - 1]
            // }
            if (this.ruleForm.id) {
              this.ruleForm.imgs = ''
              this.fileBannerList.map(item => {
                if (item.response && item.response.data) {
                  this.ruleForm.imgs += ',' + item.response.data
                } else {
                  this.ruleForm.imgs += ',' + item.url
                }
              })
              this.ruleForm.imgs = this.ruleForm.imgs.slice(1)
              console.log(this.ruleForm)
              softPut(this.ruleForm).then(res => {
                if (res.code === 200) {
                  this.$message.success('修改成功')
                  this.$router.push({
                    path: '/softManage/softManage'
                  })
                }
              })
            } else {
              softAdd(this.ruleForm).then(res => {
                if (res.code === 200) {
                  this.$message.success('操作成功')
                  this.$router.push({
                    path: '/softManage/softManage'
                  })
                }
              })
            }
          } else {
            if (this.ruleForm.id) {
              // if (this.ruleForm.nameId.length > 0) {
              //   this.ruleForm.nameId = this.ruleForm.nameId[this.ruleForm.nameId.length - 1]
              // }
              softPut(this.ruleForm).then(res => {
                if (res.code === 200) {
                  this.$message.success('修改成功')
                  this.$router.push({
                    path: '/softManage/softManage'
                  })
                }
              })
            } else {
              softAdd(this.ruleForm).then(res => {
                if (res.code === 200) {
                  this.$message.success('操作成功')
                  this.$router.push({
                    path: '/softManage/softManage'
                  })
                }
              })
            }
          }
        } else {
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    // 格式化文件大小显示文字
    getSize(size) {
      return size > 1024
        ? size / 1024 > 1024
          ? size / (1024 * 1024) > 1024
            ? (size / (1024 * 1024 * 1024)).toFixed(2) + 'GB'
            : (size / (1024 * 1024)).toFixed(2) + 'MB'
          : (size / 1024).toFixed(2) + 'KB'
        : (size).toFixed(2) + 'B'
    },
    removeFile(file) {
      this.requestCancelQueue[file.uid]()
      delete this.requestCancelQueue[file.uid]
      return true
    },
    // 提交文件方法,将参数转换为FormData, 然后通过axios发起请求
    postFile(param, onProgress) {
      const formData = new FormData()
      for (const p in param) {
        formData.append(p, param[p])
      }
      const {
        requestCancelQueue
      } = this
      const config = {
        cancelToken: new axios.CancelToken(function executor(cancel) {
          if (requestCancelQueue[param.uid]) {
            requestCancelQueue[param.uid]()
            delete requestCancelQueue[param.uid]
          }
          requestCancelQueue[param.uid] = cancel
        }),
        onUploadProgress: e => {
          if (param.chunked) {
            e.percent = Number(((((param.chunk * (param.eachSize - 1)) + (e.loaded)) / param.fullSize) * 100)
              .toFixed(2))
          } else {
            e.percent = Number(((e.loaded / e.total) * 100).toFixed(2))
          }
          onProgress(e)
        }
      }
      return axios.post('http://10.10.10.11:9006/chunk/upload', formData, config).then(rs => rs.data)
    },
    // 文件校验方法
    validateFile(file) {
      return axios.post('http://10.10.10.11:9006/chunk/md5', file).then(rs => rs.data)
    }
  }
}

</script>
<style>
  .margin-left10 {
    margin-left: 10px;
  }

  .el-upload-dragger {
    width: 260px !important;
  }

</style>
<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    border: 1px dashed #d9d9d9;
    font-size: 40px;
    color: #8c939d;
    width: 108px;
    height: 108px;
    line-height: 108px;
    text-align: center;
  }

  .avatar {
    width: 108px;
    height: 108px;
    display: block;
  }

  .app-container {
    /* background-color: #333333; */
  }

  .container {
    padding-top: 13px;
    background-color: #ffffff !important;
  }

  .el-upload-dragger {
    width: 260px !important;
  }

  .el-upload {
    width: 200px !important;
  }

  .el-upload {
    width: 200px;
  }

  .el-textarea {
    width: 200px;
    /* height: 122px; */
  }

  .margin-top20 {
    margin-top: 10px;
  }

  .el-input {
    width: 200px;
  }

  .el-select {
    width: 200px;
  }

</style>
